<template>
  <div>
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="btn">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="至少6位,包含:数字，大写字母，下划线"
            :rules="rules.password"
          />
        </van-cell-group>
        <div style="margin: 0px 16px">
          <van-button
            block
            type="primary"
            native-type="submit"
            style="border-radius: 20px"
          >
            完成
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { showDialog } from 'vant';
export default {
  data() {
    return {
      password: "",
      show: false,
      rules: {
        password: [
          {
            required: true,
            message: "请输入注册的密码",
            trigger: "blur",
          },
          {
            // 自定义校验规则
            validator: (val) => {
              return /^.*(?=.{6,12})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[!@#$%^&*?\(\)]).*$/.test(
                val
              );
            },
            message:
              "注册密码6-12位，必须包含数字、大小写字母以及特殊字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    onSubmit(password) {
      let telData = this.$route.query
      console.log(this.$route.query);
      // telData.push(password)
      // console.log(telData);
      showDialog({
        confirmButtonColor: "red", // 确认按钮颜色
        message: "注册成功",
      }).then(() => {
        localStorage.setItem('')
         this.$router.push({path:"/login",query:{tel:this.$route.query,password:password}});
      });
    },
  },
};
</script>
<style scoped>
.btn {
  margin: 50px 20px 0px 20px;
}
</style>
